<template>
            <div ref="chart-cpu" class="cpu_container" style=" width: 96%; height:92% " />
</template>
<script>
import * as echarts from 'echarts'
import { getNetio } from '@/api/chart'
import { formatDate } from '@/utils/index.js'
export default {
    data() {
        return {
            cupData: {
                xAxisData: [],
                seriesData: []
            },
            intervalId: null // 存储定时器的ID
        }
    },
    mounted() {
        this.fetchCupData() // 首次获取数据并创建图表
        this.intervalId = setInterval(this.fetchCupData, 40000)
    },
    beforeDestroy() {
        // 组件销毁前清除定时器
        if (this.intervalId) {
            clearInterval(this.intervalId)
        }
    },
    methods: {
        formatDate,
        async fetchCupData() {
            const response = await getNetio()
            console.log(response)
            const mainHost = response[2]
            this.cupData.xAxisData = mainHost.map(item => formatDate(item.createTime))
            this.cupData.seriesData = mainHost.map(item => item.rxbyt)
            this.createChartCpu() // 使用获取到的数据创建图表
        },
        createChartCpu() {
            var myChart = echarts.init(this.$refs['chart-cpu'])
            var option = {
                tooltip: {},
                xAxis: {
                    axisLabel: {
                        // 旋转标签（45度或更多）
                        rotate: 30
                        // 格式化函数

                    },
                    data: this.cupData.xAxisData,
                    name: '日期'
                },
                yAxis: {
                    name: '每秒钟接收的KB数(rxKB/s)',
                    axisLabel: {
                        formatter: '{value} rxKB/s'
                    }
                },
                series: [
                    {
                        name: '每秒钟接收的KB数',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            color: '#4BAAF4' // 线的颜色
                        },
                        itemStyle: {
                            color: '#36A8FF' // 折点颜色
                        },
                        emphasis: {
                            areaStyle: {
                                color: '#B1DAFA'
                            }
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: '#B1DAFA' // 0% 处的颜色 B1DAFA
                                    },
                                    {
                                        offset: 1,
                                        color: '#F2F9FE' // 100% 处的颜色
                                    }
                                ],
                                false
                            )
                        },
                        data: this.cupData.seriesData
                    }
                ]
            }
            myChart.setOption(option)
        }
    }
}
</script>

<style lang="scss" scoped>
.netio_container {
    margin-top: 15px;
    width: 97%;
    background-color: white;
    .netio1 {
        width: 100%;
        height: 300px;
        margin-top: 15px;
        display: flex;
        justify-content: center;

        .netio1_container {
            padding-top: 10px;
        }
    }
}
</style>